<script setup lang="ts">
import {getLogs} from "@/api/sysController.ts";
import {onMounted, ref} from "vue";

const htmlContent = ref('')

onMounted(() => {
  getLogs().then(res => {
    // console.log(res, 'res')
    const lines = res.split('\n');

    for (let i = 0; i < lines.length; i++) {
      lines[i] = lines[i].replace(/\[([^\]]+)\]/, "[<span style='color: #43e82f'>$1</span>]")
      lines[i] = lines[i].replace(/\[(INFO )\]/, "[<span style='color: #2da3ed'>$1</span>]")
      lines[i] = lines[i].replace(/\[(c.k.s.config.HeartbreakInterceptor)\]/, "[<span style='color: #41f636'>$1</span>]")

      lines[i] = lines[i] + "<br />"
    }
    const s = lines.join('')
    htmlContent.value = s
  })
})
</script>

<template>
  <div class="main">Logs
    <div class="content" v-html="htmlContent"></div>
  </div>
</template>

<style scoped lang="scss">
.main {
  padding: 20px;
  .content {
    padding: 20px;
    background-color: #1e1f22;
    color: white;
    line-height: 20px;
    height: 80vh;
    overflow: auto;
    font-family: "JetBrains Mono", ".萍方-简",serif;
  }
}
</style>